<script setup lang="ts">
import {
  NAvatar,
  NButton,
  NForm,
  NFormItem,
  NGrid,
  NGridItem,
  NInput,
  NRadio,
  NRadioGroup,
  NTabPane,
  NTabs,
  NTag,
  useMessage
} from 'naive-ui';
import { reactive, ref } from 'vue';
import { useAuthStore } from '@/store/modules/auth';
import { fetchChangePassword, fetchUpdateUserInfo } from '@/service/api/auth';

const authStore = useAuthStore();
const message = useMessage();

// 当前激活的标签
const activeTab = ref('personal-info');

// 个人信息表单
const userInfoForm = reactive({
  nickname: authStore.userInfo.nickname,
  phone: authStore.userInfo.phone,
  email: authStore.userInfo.email,
  sex: authStore.userInfo.sex,
  remark: authStore.userInfo.remark
});

// 密码修改表单
const passwordForm = reactive({
  oldPassword: '',
  newPassword: '',
  confirmPassword: ''
});

// 菜单选项
const menuOptions = [
  {
    label: '基本设置',
    key: 'basic-settings',
    children: [
      {
        label: '个人信息',
        key: 'personal-info'
      }
    ]
  },
  {
    label: '安全设置',
    key: 'security-settings',
    children: [
      {
        label: '修改密码',
        key: 'change-password'
      }
    ]
  }
];

// 提交密码修改
async function handleSubmitPassword() {
  if (passwordForm.newPassword !== passwordForm.confirmPassword) {
    message.error('两次输入的新密码不一致');
    return;
  }

  const { error } = await fetchChangePassword(passwordForm.oldPassword, passwordForm.newPassword);
  if (error) {
    passwordForm.oldPassword = '';
    passwordForm.newPassword = '';
    passwordForm.confirmPassword = '';
  } else {
    authStore.resetStore();
  }
}

// 提交个人信息
async function handleSubmitUserInfo() {
  const { error } = await fetchUpdateUserInfo({
    nickname: userInfoForm.nickname,
    phone: userInfoForm.phone,
    email: userInfoForm.email,
    sex: userInfoForm.sex,
    remark: userInfoForm.remark
  });
  if (!error) {
    authStore.initUserInfo();
    message.success('个人信息更新成功');
  }
}

// 处理头像上传
function handleAvatarUpload() {
  // TODO: 实现头像上传功能
}
</script>

<template>
  <NGrid cols="8" item-responsive responsive="screen" :x-gap="16" :y-gap="16">
    <!-- 左侧个人信息 -->
    <NGridItem span="8 m:2 l:2">
      <div class="user-info-sidebar">
        <div class="user-profile">
          <NAvatar round size="large" :src="authStore.userInfo.avatar || '/avatar-default.jpg'" class="avatar" />
          <h2 class="username">{{ authStore.userInfo.nickname || authStore.userInfo.userName }}</h2>
          <div class="role">{{ authStore.userInfo.roles[0] || '暂无角色' }}</div>
          <div class="org">{{ authStore.userInfo.remark || '暂无备注' }}</div>
        </div>
        <div class="user-details">
          <div class="detail-item">
            <span class="label">用户名</span>
            <span class="value">{{ authStore.userInfo.userName || '未设置' }}</span>
          </div>
          <div class="detail-item">
            <span class="label">手机号码</span>
            <span class="value">{{ authStore.userInfo.phone || '未设置' }}</span>
          </div>
          <div class="detail-item">
            <span class="label">电子邮箱</span>
            <span class="value">{{ authStore.userInfo.email || '未设置' }}</span>
          </div>
        </div>
        <div class="user-tags">
          <template v-if="authStore.userInfo.roles && authStore.userInfo.roles.length">
            <NTag v-for="role in authStore.userInfo.roles" :key="role" size="small" type="success">
              {{ role }}
            </NTag>
          </template>
          <NTag v-else size="small" type="default">暂无角色</NTag>
        </div>
      </div>
    </NGridItem>

    <!-- 右侧内容区 -->
    <NGridItem span="8 m:6 l:6">
      <div class="content-wrapper">
        <div class="content-area">
          <NTabs v-model:value="activeTab" type="line" justify-content="space-evenly" class="tabs-container">
            <NTabPane name="personal-info" tab="基本信息">
              <div class="avatar-upload">
                <div class="upload-area">
                  <div class="avatar-container">
                    <NAvatar round size="large" :src="authStore.userInfo.avatar || '/avatar-default.jpg'" />
                  </div>
                  <div class="button-container">
                    <NButton class="upload-btn" @click="handleAvatarUpload">选择图片</NButton>
                  </div>
                </div>
              </div>

              <NForm label-placement="left" label-width="auto" class="info-form">
                <NFormItem label="用户名">
                  <NInput :value="authStore.userInfo.userName" disabled />
                </NFormItem>
                <NFormItem label="昵称" required>
                  <NInput v-model:value="userInfoForm.nickname" />
                </NFormItem>
                <NFormItem label="手机号码" required>
                  <NInput v-model:value="userInfoForm.phone" />
                </NFormItem>
                <NFormItem label="电子邮箱" required>
                  <NInput v-model:value="userInfoForm.email" />
                </NFormItem>
                <NFormItem label="性别">
                  <NRadioGroup v-model:value="userInfoForm.sex">
                    <NRadio value="0">女</NRadio>
                    <NRadio value="1">男</NRadio>
                    <NRadio value="2">保密</NRadio>
                  </NRadioGroup>
                </NFormItem>
                <NFormItem label="备注">
                  <NInput v-model:value="userInfoForm.remark" type="textarea" />
                </NFormItem>
                <NFormItem class="form-actions">
                  <NButton type="primary" @click="handleSubmitUserInfo">保存</NButton>
                </NFormItem>
              </NForm>
            </NTabPane>

            <NTabPane name="security" tab="安全设置">
              <NForm label-placement="left" label-width="auto">
                <NFormItem label="旧密码" required>
                  <NInput v-model:value="passwordForm.oldPassword" type="password" show-password-on="click" />
                </NFormItem>
                <NFormItem label="新密码" required>
                  <NInput v-model:value="passwordForm.newPassword" type="password" show-password-on="click" />
                </NFormItem>
                <NFormItem label="确认新密码" required>
                  <NInput v-model:value="passwordForm.confirmPassword" type="password" show-password-on="click" />
                </NFormItem>
                <NFormItem class="form-actions">
                  <NButton type="primary" @click="handleSubmitPassword">修改密码</NButton>
                </NFormItem>
              </NForm>
            </NTabPane>
          </NTabs>
        </div>
      </div>
    </NGridItem>
  </NGrid>
</template>

<style scoped>
.user-center-container {
  padding: 24px;
  background-color: #f5f5f5;
  min-height: calc(100vh - 64px);
}

.user-info-sidebar {
  background: white;
  border-radius: 8px;
  padding: 24px;
  height: fit-content;
}

.user-profile {
  text-align: center;
  padding-bottom: 24px;
  border-bottom: 1px solid #f0f0f0;
}

.avatar {
  width: 104px;
  height: 104px;
  margin-bottom: 16px;
}

.username {
  margin: 8px 0;
  font-size: 20px;
  font-weight: 500;
  color: #333;
}

.role,
.org {
  color: #666;
  margin-bottom: 8px;
  font-size: 14px;
}

.user-details {
  padding: 24px 0;
  border-bottom: 1px solid #f0f0f0;
}

.detail-item {
  margin-bottom: 16px;
  display: flex;
  align-items: flex-start;
}

.detail-item .label {
  color: #666;
  margin-right: 8px;
  min-width: 70px;
  font-size: 14px;
}

.detail-item .value {
  color: #333;
  flex: 1;
  word-break: break-all;
  font-size: 14px;
}

.user-tags {
  padding-top: 24px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.content-wrapper {
  height: 100%;
}

.content-area {
  background: white;
  border-radius: 8px;
  padding: 24px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.avatar-upload {
  margin-bottom: 32px;
  width: 100%;
  max-width: 600px;
  text-align: center;
}

.avatar-upload h3 {
  margin-bottom: 20px;
  font-size: 16px;
  color: #333;
}

.upload-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.avatar-container {
  display: flex;
  justify-content: center;
}

.avatar-container :deep(.n-avatar) {
  width: 120px;
  height: 120px;
}

.button-container {
  display: flex;
  justify-content: center;
}

.upload-btn {
  min-width: 100px;
}

.info-form {
  max-width: 600px;
  width: 100%;
}

.form-actions {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}

.form-actions :deep(.n-form-item-blank) {
  display: flex;
  justify-content: center;
}

/* 密码修改表单也需要居中和限制宽度 */
.content-area > div {
  width: 100%;
  max-width: 600px;
}

.tabs-container {
  width: 100%;
  max-width: 600px;
}

.tabs-container :deep(.n-tabs-nav) {
  justify-content: center;
  margin-bottom: 24px;
}
</style>
